<template>
  <page-header-wrapper :title="false">
    <div>
      <a-row id="home_wrapper" type="flex">
        <a-col id="left_tree" flex="400px">
          <div>
            <a-tree
              checkable
              :show-line="true"
              :show-icon="false"
              :show-leaf-icon="false"
              :default-expand-all="true"
              :treeData="orgAllTreeData"
              :replaceFields="orgTreereplaceFields"
              @select="onSelectOrgTree"
            >
            </a-tree>
          </div>
        </a-col>
        <div style="width: 10px"></div>
        <a-col flex="auto">
          <div id="right-content-white">
            <a-card title="" :bordered="false">
              <div class="table-page-search-wrapper">
                <a-form layout="inline">
                  <a-row :gutter="48">
                    <a-col :md="12" :sm="24">
                      <a-form-item label="" style="float:left">
                        <a-radio-group button-style="solid" default-value="1" @change="handleAlarmDateType">
                          <a-radio-button value="1"> 今天 </a-radio-button>
                          <a-radio-button value="2"> 昨天 </a-radio-button>
                          <a-radio-button value="3"> 近7天 </a-radio-button>
                          <a-radio-button value="4"> 近30天 </a-radio-button>
                          <a-radio-button value="5"> 选择日期 </a-radio-button>
                        </a-radio-group>
                      </a-form-item>
                      <a-form-item label="" style="float:left">
                        <a-date-picker v-show="alarmDateType == 5" format="YYYY-MM-DD" :disabled-date="disabledDate" @change="onChangeDate" placeholder="请选择"/>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>

                <template>
                  <a-table
                    size="small"
                    bordered
                    :columns="orgColumns"
                    :row-key="(record) => record.id"
                    :data-source="orgData"
                    :pagination="orgPagination"
                    :loading="loading"
                    @change="handleOrgTableChange"
                  >
                    <span slot="handledStatus" slot-scope="text, record">
                      <a-tag color="#87d068" v-if="record.handledStatus == 1"> 已处理 </a-tag>
                      <a-tag color="#cd201f" v-if="record.handledStatus == 0"> 未处理 </a-tag>
                    </span>
                    <!-- <span slot="orgAction" slot-scope="text, record">
                    <a @click="() => handleEditOrg(record.id)"> <a-icon type="edit" /> 编辑 </a>
                    <a-divider type="vertical" />
                    <a-popconfirm
                      title="确认删除该告警信息？"
                      ok-text="确认"
                      cancel-text="取消"
                      @confirm="() => delData(record.id)"
                    >
                      <a href="#"> <a-icon type="delete" /> 删除</a>
                    </a-popconfirm>
                  </span> -->
                  </a-table>
                </template>
              </div>
            </a-card>
          </div>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
import { treeTransArray } from '@/utils/util'
import moment from 'moment'

const orgColumns = [
  {
    title: '发生时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
  },
  {
    title: '告警设备编码',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '告警内容',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '设备位置',
    key: 'address',
    dataIndex: 'address',
  },
  {
    title: '处理状态',
    key: 'handledStatus',
    dataIndex: 'handledStatus',
    scopedSlots: { customRender: 'handledStatus' },
  },
]

export default {
  name: 'DeviceAlarmList',
  components: {
    [TreeSelect.name]: TreeSelect,
    ATreeSelectNode: TreeSelect.TreeNode,
  },
  data() {
    return {
      loading: false,
      orgTreeSelect: {},
      orgAllTreeData: [],
      orgAllListData: [],
      orgAllData: [],
      orgTreereplaceFields: {
        title: 'lable',
        key: 'id',
        value: 'id',
      },
      alarmDateType: 1,
      selectDate:'',
      formLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      orgColumns,
      orgSelectedRowKeys: [],
      orgPagination: {
        pageSize: 10,
        showQuickJumper: true,
        showTotal: (total, range) => `共 ${total} 条`,
      },
      orgData: [],
    }
  },
  mounted() {
    this.getOrgTree()
    this.queryDataParam()
  },
  methods: {
    disabledDate(current) {
      return current > moment().endOf('day')
    },
    onChangeDate(date, dateString) {
      this.selectDate = dateString
      this.orgPagination.current = 1
      this.queryDataParam()
    },
    onOrgOperFilter(searchVal, treeNode) {
      return treeNode.data.props.lable.includes(searchVal)
    },
    onSelectOrgTree(selectedKeys, info) {
      let selectOrgId = selectedKeys && selectedKeys.length > 0 ? selectedKeys[0] : ''
      if (!selectOrgId) {
        this.orgTreeSelect = {}
      } else {
        //  判断选择的信息类型
        let item = this.orgAllListData.filter((i) => i.id == selectOrgId)[0]
        if (item.type == 'ORG') {
          this.orgTreeSelect = { porgIds: selectOrgId }
        } else if (item.type == 'PROJECT') {
          this.orgTreeSelect = { projectIds: selectOrgId }
        }
      }
      this.orgPagination.current = 1
      this.queryDataParam()
    },
    getOrgTree() {
      this.$http.get('/web/common/getFullOrgTree').then((res) => {
        if (res.code == 0) {
          this.orgAllListData = treeTransArray(JSON.parse(JSON.stringify(res.data)))
          this.orgAllTreeData = res.data
        }
      })
    },
    onOrgSelectChange(selectedRowKeys) {
      this.orgSelectedRowKeys = selectedRowKeys
    },
    handleOrgTableChange(pagination, filters, sorter) {
      this.orgPagination.current = pagination.current
      this.orgPagination.pageSize = pagination.pageSize
      this.queryDataParam(pagination.current, pagination.pageSize)
    },
    handleAlarmDateType(e) {
      this.alarmDateType = e.target.value
      if(e.target.value != 5 || this.selectDate){
        this.orgPagination.current = 1
        this.queryDataParam()
      }
    },
    delData(id) {
      this.loading = true
      let param = { orgIds: id }
      this.$http.delete('/web/deviceAlarm/delete', { params: param }).then((res) => {
        this.loading = false
        if (res.code == 0) {
          this.$notification['success']({
            message: '成功',
            description: '告警信息已删除',
          })
          this.orgPagination.current = 1
          this.queryDataParam()
        } else {
          this.$notification['error']({
            message: '错误',
            description: res.message,
            duration: 4,
          })
        }
      })
    },
    queryDataParam() {
      this.loading = true
      let param = Object.assign({},this.orgTreeSelect)
      param.start = this.orgPagination.current
      param.limit = this.orgPagination.size
      console.log('this.alarmDateType',this.alarmDateType)
      //  组装查询日期
      if (this.alarmDateType == 1) {
        param.alarmDate = moment().format('YYYY-MM-DD')
      } else if (this.alarmDateType == 2) {
        param.alarmDate = moment().subtract(1, 'days').format('YYYY-MM-DD')
      } else if (this.alarmDateType == 3) {
        param.alarmStartDate = moment().subtract(7, 'days').format('YYYY-MM-DD')
      } else if (this.alarmDateType == 4) {
        param.alarmStartDate = moment().subtract(30, 'days').format('YYYY-MM-DD')
      }else if (this.alarmDateType == 5) {
        param.alarmDate = this.selectDate
      }

      this.$http.get('/web/deviceAlarm/page', { params: param }).then((res) => {
        this.loading = false
        if (res.code == 0) {
          let data = res.data
          this.orgData = data.records
          const pagination = { ...this.pagination }
          // Read total count from server
          // pagination.total = data.totalCount;

          pagination.total = data.total
          pagination.current = data.current
          pagination.pageSize = data.size
          this.orgPagination = pagination
        }
      })
    },
  },
}
</script>
